<template>
  <div class="login" :style="{ background: `url(${require('@/assets/login-bg.jpg')})` }">
    <section class="content">
      <section class="title-container">
        <span>驱动管理系统</span>
      </section>
      <section class="form-container">
        <a-form :form="form" class="login-form" @submit="handleSubmit">
          <a-form-item label="账号">
            <a-input
              v-decorator="[
            'account',
            {
              rules: [{ required: true, message: '请输入账号!' }]
            }
          ]"
              placeholder="账号"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="密码">
            <a-input
              v-decorator="[
            'password',
            {
              rules: [{ required: true, message: '请输入密码!' }]
            }
          ]"
              type="password"
              placeholder="密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
          </a-form-item>
        </a-form>
      </section>
    </section>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { RouterPath } from "@/utils/VEnum";

interface ILogin {
  username: string;
  password: string;
}

@Component({ name: "Login" })
export default class Login extends Vue {
  private form: any = {};

  created() {
    this.form = this.$form.createForm(this);
  }

  @Action("userLogin")
  private userLogin: any;

  handleSubmit(e: any) {
    e.preventDefault();
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        this.submit(values);
      }
    });
  }

  async submit(values: ILogin) {
    try {
      const isLogin = await this.userLogin(values);
      if (isLogin) {
        window.location.href = RouterPath.HOME;
      }
    } catch (error) {
      return null;
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 65%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-container {
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin-left: 200px;
      span {
        font-size: 50px;
        color: #fff;
      }
    }
    .form-container {
      display: flex;
      justify-content: center;
      margin-top: 50px;
      padding-top: 50px;
      width: 300px;
      height: 350px;
      box-shadow: 0 0 3px #999;
      border-radius: 6px;
      background-color: #fbfbfb;
      .login-form {
        width: 200px;
      }
      .login-form-button {
        width: 100%;
      }
    }
  }
}
</style>
